<template>
  <div style="margin-top: 10px">
    <div class="my-body_left" style="height: 700px; overflow-y: auto">
      <div style="width: 100%; height: 100px">
        <el-button type="primary" @click="guanlianqyli()" plain
          >添加系列</el-button
        >
        <el-button type="primary" @click="guanlianqya = true" plain
          >添加类型</el-button
        >
        <el-button type="danger" plain @click="shanchu">删除类型</el-button>
        <el-button type="danger" plain @click="shanchu">删除系列</el-button>
      </div>
      <div>
        <el-tree
          class="filter-tree"
          :data="data"
          :props="defaultProps"
          default-expand-all
          :filter-node-method="filterNode"
          @node-click="handleNodeClick"
          ref="tree"
        >
        </el-tree>
      </div>
    </div>
    <el-dialog
      title="添加产品系列"
      :visible.sync="guanlianqy"
      width="30%"
      :before-close="handleClose"
    >
      <div style="width: 100%; height: 300px">
        <div>
          <div style="width: 100%; height: 50px; float: left">产品系列</div>
          <div class="ipt_a">
            <div style="float: left; line-height: 30px">* 名称：</div>
            <el-input
              v-model="operation.name"
              style="width: 200px; height: 50px; float: left"
            ></el-input>
          </div>
          <div class="ipt_a">
            <div style="float: left; line-height: 30px">* 资质必填：</div>
            
            <el-select
              v-model="operation.must_credential"
              placeholder="请选择是否资质必填"
              style="width: 150px; height: 50px; float: left"
            >
              <el-option label="是" value="1"></el-option>
              <el-option label="否" value="2"></el-option>
            </el-select>
          </div>

          <div class="ipt_a" style="float: left">
            <div style="float: left; line-height: 30px">* 简称：</div>
            <el-input
              v-model="operation.abbreviation"
              style="width: 150px; height: 50px; float: left"
            ></el-input>
            <div style="float: left; line-height: 30px">* 标签：</div>
            <el-input
              v-model="operation.lable_value"
              style="width: 80px; height: 50px; float: left"
            ></el-input>
          </div>
        </div>

        <div class="ipt_a">
          <el-button>返回</el-button>
          <el-button type="primary" @click="tijiaotab">提交</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="添加产品类型"
      :visible.sync="guanlianqya"
      width="30%"
      :before-close="handleClose"
    >
      <div style="width: 100%; height: 500px">
        <div>
          <div style="width: 100%; height: 50px; float: left">产品系列</div>
          <div class="ipt_a">
            <div style="float: left; line-height: 30px">* 名称：</div>
            <el-input
              v-model="operations.name"
              style="width: 200px; height: 50px; float: left"
            ></el-input>

            
          </div>
		  <div class="ipt_a">
            <div style="float: left; line-height: 30px">* 资质必填：</div>
            
            <el-select
              v-model="operations.must_credential"
              placeholder="请选择是否资质必填"
              style="width: 150px; height: 50px; float: left"
            >
              <el-option label="是" value="1"></el-option>
              <el-option label="否" value="2"></el-option>
            </el-select>
          </div>
          <div class="ipt_a" style="float: left">
            <div style="float: left; line-height: 30px">* 简称：</div>
            <el-input
              v-model="operations.abbreviation"
              style="width: 150px; height: 50px; float: left"
            ></el-input>
            <div style="float: left; line-height: 30px">* 标签：</div>
            <el-input
              v-model="operations.lable_value"
              style="width: 80px; height: 50px; float: left"
            ></el-input>
          </div>
        </div>
        <div>
          <div style="width: 100%; height: 50px; float: left">产品类型</div>
          <div class="ipt_a" style="float: left">
            <div style="float: left; line-height: 30px">* 名称：</div>
            <el-input
              v-model="operations.names"
              style="width: 150px; height: 50px; float: left"
            ></el-input>
            <div style="float: left; line-height: 30px">* 标签：</div>
            <el-input
              v-model="operations.lable_values"
              style="width: 80px; height: 50px; float: left"
            ></el-input>
          </div>
          <div class="ipt_a" style="float: left">
            <div style="float: left; line-height: 30px">* 简称：</div>
            <el-input
              v-model="operations.abbreviations"
              style="width: 150px; height: 50px; float: left"
            ></el-input>
            <div style="float: left; line-height: 30px">单价：</div>
            <el-input
              v-model="operations.price"
              style="width: 80px; height: 50px; float: left"
            ></el-input
            >元
          </div>
          <div class="ipt_a" style="float: left">
            <div style="float: left; line-height: 30px">* 出库单名称：</div>
            <el-input
              v-model="operations.ck_name"
              style="width: 150px; height: 50px; float: left"
            ></el-input>
            <div style="float: left; line-height: 30px">*缩写：</div>
            <el-input
              v-model="operations.suo_xie"
              style="width: 80px; height: 50px; float: left"
            ></el-input>
          </div>
		  <div class="ipt_a">
            <div style="float: left; line-height: 30px">* 返利：</div>
            
            <el-select
              v-model="operations.rebate_type"
              placeholder="请选择是否返利"
              style="width: 150px; height: 50px; float: left"
            >
              <el-option label="植入返利" value="1"></el-option>
              <el-option label="订货返利" value="2"></el-option>
            </el-select>
          </div>
        </div>

        <div class="ipt_a">
          <el-button>返回</el-button>
          <el-button type="primary" @click="xltijiaotab()">提交</el-button>
        </div>
      </div>
    </el-dialog>
    <div class="my-body_left" style="height: 700px; overflow-y: auto">
      <div style="width: 100%; height: 50px">
        <el-button type="primary" @click="chanpingguige = true" plain
          >添加产品规格</el-button
        >
        <el-button type="danger" plain @click="shanchugg">删除产品规格</el-button>
      </div>
      <el-dialog
        title="添加产品规格"
        :visible.sync="chanpingguige"
        width="30%"
        :before-close="handleClose"
      >
        <div style="width: 100%; height: 500px">
          <div>
            <div style="width: 100%; height: 50px; float: left">产品类型</div>
            <!-- <div class="ipt_a">
              <div style="float: left; line-height: 30px">产品系列：</div>
              <el-input
                v-model="input"
                style="width: 200px; height: 50px; float: left"
              ></el-input>
            </div> -->

            <div class="ipt_a" style="float: left">
              <div style="float: left; line-height: 30px">产品类型：</div>
              <el-input
                v-model="cptions.name"
                style="width: 200px; height: 50px; float: left"
              ></el-input>
            </div>
          </div>
          <div>
            <div style="width: 100%; height: 50px; float: left">产品规格</div>
            <div class="ipt_a">
              <div style="float: left; line-height: 30px">* 规格编号：</div>
              <el-input
                v-model="cptions.specification_number"
                style="width: 200px; height: 50px; float: left"
              ></el-input>
            </div>

            <div class="ipt_a" style="float: left">
              <div style="float: left; line-height: 30px">* 规格条码：</div>
              <el-input
                v-model="cptions.specification_barcode"
                style="width: 200px; height: 50px; float: left"
              ></el-input>
            </div>
            <div class="ipt_a" style="float: left">
              <div style="float: left; line-height: 30px">中文注册号：</div>
              <el-input
                v-model="cptions.chinese_registration_number"
                style="width: 200px; height: 50px; float: left"
              ></el-input>
            </div>
            <div class="ipt_a" style="float: left">
              <div style="float: left; line-height: 30px">生产许可证号：</div>
              <el-input
                v-model="cptions.production_license_number"
                style="width: 200px; height: 50px; float: left"
              ></el-input>
            </div>
            <div class="ipt_a" style="float: left">
              <div style="float: left; line-height: 30px">备注：</div>
              <el-input
                v-model="cptions.remark"
                style="width: 200px; height: 50px; float: left"
              ></el-input>
            </div>
          </div>

          <div class="ipt_a">
            <el-button>返回</el-button>
            <el-button type="primary" @click="tjguige()">提交</el-button>
          </div>
        </div>
      </el-dialog>
      <div>
        <template>
          <el-table
            :data="tableDatagglist"
            border
            style="width: 100%; margin-top: 30px"
            :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
            ref="singleTable"
    highlight-current-row
    @current-change="handleCurrentChange"
          >
            <el-table-column prop="specification_number" label="产品规格">
            </el-table-column>
            <el-table-column prop="specification_barcode" label="条码">
            </el-table-column>
            <el-table-column prop="senddate" label="中文注册号">
            </el-table-column>
            <el-table-column prop="senddate" label="说明"> </el-table-column>
          </el-table>
        </template>
      </div>
    </div>
    <div class="my-body_left" style="height: 700px; overflow-y: auto">
      <el-button type="primary" @click="shangchuan = true" plain
        >上传</el-button
      >
      <el-button type="primary" plain>下载</el-button>
      <el-button type="danger" plain>删除</el-button>
      <el-dialog
        title="添加产品文件"
        :visible.sync="shangchuan"
        width="30%"
        :before-close="handleClose"
      >
        <div style="width: 100%; height: 200px">
          <el-form ref="form" :model="form" label-width="150px">
              <el-form-item label="文件路径">
                <!-- 	<el-input v-model="form.name" style="width: 200px"></el-input> -->
                <el-upload
                  :action="uploadUrl"
                  list-type="text"
                  :on-success="handleSuccess"
                  :on-error="handleError"
                >
                  <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
              </el-form-item>

              <el-form-item label="文件名称">
                <el-input v-model="usernameimg" style="width: 200px"></el-input>
                <el-checkbox
                  :indeterminate="isIndeterminate"
                  v-model="checkAll"
                  @change="handleCheckAllChange"
                  >重命名</el-checkbox
                >
              </el-form-item>
              <el-form-item label="文件类型">
                <el-select v-model="usernamelei" placeholder="请选择文件类型">
                  <el-option
                    v-for="item in shouquanlei"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id"
                    :disabled="item.disabled"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="onSubmitpsf">申请</el-button>
                <el-button @click="quxiaosq">取消</el-button>
              </el-form-item>
            </el-form>
        
        </div>
      </el-dialog>
      <div>
        <template>
          <el-table
            :data="tablewjlist"
            border
            style="width: 98%; margin-top: 40px; margin-left: 1%"
            :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
          >
            <el-table-column prop="file_name" label="文件名称">
            </el-table-column>
            <el-table-column prop="product_file_type_txt" label="文件类型">
            </el-table-column>
          </el-table>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { getData, postData } from "@/utils/request.js";
export default {
  data() {
    return {
      area: false,
      tiaoxingma: false,
      tianjianlist: false,
      diquxuanzhe: false,
      guanlianqy: false,
      guanlianqya: false,
      chanpingguige: false,
      shangchuan: false,
      yiykeshi: false,
      ghyyxz: false,
      tablisty: false,
      tablistya: false,
      tablistyb: false,
      key: 1, // 为了能每次切换权限的时候重新初始化指令
      options: [
        {
          value: "1",
          label: "全部",
        },
        {
          value: "2",
          label: "一般订单",
        },
        {
          value: "3",
          label: "积分订单",
        },
        {
          value: "3",
          label: "样品订单",
        },
        {
          value: "3",
          label: "换货订单",
        },
      ],
      data: [
        {
          label: "一级 1",
          children: [
            {
              label: "二级 1-1",
            },
          ],
        },
        {
          label: "一级 2",
          children: [
            {
              label: "二级 2-1",
            },
            {
              label: "二级 2-2",
            },
          ],
        },
        {
          label: "一级 3",
          children: [
            {
              label: "二级 3-1",
            },
            {
              label: "二级 3-2",
            },
          ],
        },
      ],
      value1: "",
      value2: "",
      value3: "",
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      radio: "授权医院",
      value: "",
      tableData: [
        {
          bianhao: "PS074107742412L",
          senddate: "2024-05-02",
          enddate: "2024-12-31",
          name: "左心耳",
          province: "完成授权",
          city: "普陀区",
          address: "苏州市中心医院",
          shouqfang: "鹰潭市方园医药有限公司",
          jingxiaos: "鹰潭市方园医药有限公司",
          peisonf: "鹰潭市方园医药有限公司",
          shouqyy: "入院",
          shangcaizhibiao: 3,
        },
      ],
      checkAll: false,
      checkedCities: [],
      cities: [
        "房间隔缺损",
        "室间隔缺损",
        "介入输送装置",
        "动脉导管未闭",
        "抓捕器",
      ],
      isIndeterminate: true,
      chanpinlei: 1,
      defaultProps: {
        children: "children",
        label: "name",
      },
      tableDatagglist: [],
      operation: {
        name: "",
        abbreviation: "",
        lable_value: "",
        must_credential: "",
      },
      operations: {
		id:"",
        name: "",
        abbreviation: "",
        lable_value: "",
        names: "",
        abbreviations: "",
        lable_values: "",
        price: "",
        ck_name: "",
        suo_xie: "",
        must_credential: "",
        rebate_type: "",
      },
	  cptions:{
		product_type_id:"",
		specification_number:"",
		specification_barcode:"",
		chinese_registration_number:"",
		production_license_number:"",
		remark:"",
		name:"",
	  },
    tablewjlist:[],
    uploadUrl: "http://192.168.3.184:8093/api/index/uploadFile",
      shouquanlei: [],
      usernameimg: "",
      usernamelei: "",
      pid: "",
    };
  },
  created() {
    this.list();
    this.shangcahun()
  },
  methods: {
    handleCurrentChange(val) {
        this.currentRow = val;
      },
  //删除
  shanchugg(){
    console.log()
    var data = {
        ids:  this.currentRow.id,
        token: localStorage.getItem("token"),
      };
      postData("product.specifications/del", data).then((res) => {
        console.log(this.shouquanlei);
        this.gglist(this.cptions.product_type_id)
      });
  },
  
    shangcahun() {
      var data = {
        type: 1,
        token: localStorage.getItem("token"),
      };
      postData("index/fileParams", data).then((res) => {
        // 处理响应数据

        this.shouquanlei = res.data.file_type;
        this.usernamelei = res.data.file_type[1].id;

        console.log(this.shouquanlei);
      });
    },
    onSubmitssqf() {
      var data = {
        type: 1,
        token: localStorage.getItem("token"),
        belong_id:  this.cptions.product_type_id,
        file_name: this.usernameimg,
        file_type: this.usernamelei,
        url: this.url,
      };
      postData("index/addFile", data).then((res) => {
        console.log(res);
       
      });
    },
	tjguige(){
		var data = {
		product_type_id:this.cptions.product_type_id,
		specification_number:this.cptions.specification_number,
		specification_barcode:this.cptions.specification_barcode,
		chinese_registration_number:this.cptions.chinese_registration_number,
		production_license_number:this.cptions.production_license_number,
		remark:this.cptions.remark,
        token: localStorage.getItem("token"),
      };
      postData("product.specifications/operation", data).then((res) => {
		this.gglist(this.cptions.product_type_id)
      });
	},
	shanchu(){
		var data = {
		ids:this.operations.id,
        token: localStorage.getItem("token"),
      };
      postData("product.type/del", data).then((res) => {
		this.list()
      });
		
	},
    tijiaotab() {
      var data = {
        name: this.operation.name,
        abbreviation: this.operation.abbreviation,
        lable_value: this.operation.lable_value,
		must_credential: this.operation.must_credential,
        token: localStorage.getItem("token"),
      };
      postData("product.type/operation", data).then((res) => {
        this.list()
      });
    },
    xltijiaotab() {
      var data = {
		pid:this.operations.id,
        name: this.operations.names,
        abbreviation: this.operations.abbreviations,
        lable_value: this.operations.lable_values,
        lable_xlh_value: this.operations.lable_xlh_value,
        price:this.operations.price,
		ck_name:this.operations.ck_name,
		suo_xie:this.operations.suo_xie,
		must_credential:this.operations.must_credential,
		rebate_type:this.operations.rebate_type,
        token: localStorage.getItem("token"),
      };
      postData("product.type/operation", data).then((res) => {
		this.list()
      });
    },
    //产品类型
    list() {
      var data = {
        token: localStorage.getItem("token"),
      };
      postData("product.type/indexlist", data).then((res) => {
        console.log(res.data);
        this.data = res.data;
        this.handleNodeClick(res.data[0]);
      });
    },
    //规格列表
    gglist(e) {
      var data = {
        product_type_id: e,
        token: localStorage.getItem("token"),
      };
      postData("product.Specifications/indexlist", data).then((res) => {
        this.tableDatagglist = res.data.data;
      });
    },
    handleNodeClick(data) {
      console.log(data);
	  if(data.pid ==0){
		this.operations.name = data.name;
      this.operations.abbreviation = data.abbreviation;
      this.operations.lable_value = data.lable_value;
	  this.operations.id = data.id
      this.pid = data.pid;
	  }else{
           this.cptions.name = data.name
		   this.cptions.product_type_id = data.id
	  }
      this.wenjianlist(data.id)
      this.gglist(data.id);
      // this.guanlianqya = true
    },
    wenjianlist(e) {
      var data = {
        product_type_id: e,
        token: localStorage.getItem("token"),
      };
      postData("product.type/getProductTypeFile", data).then((res) => {
        this.tablewjlist = res.data;
      });
    },
    
    guanlianqyli() {
      this.guanlianqy = true;
    },
    handleClick(row) {
      console.log(row);
    },
    handleCheckAllChange(val) {
      const cityOptions = ["上海", "北京", "广州", "深圳"];
      console.log(val);
      this.checkedCities = val ? cityOptions : [];

      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
  },
};
</script>

<style lang="scss" scoped>
.ipt_a {
  width: 100%;
  height: 50px;
  float: left;
}

.ipt_b {
  width: 450px;
  height: 50px;
  float: left;
}
</style>